<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css"/>
	<style>
		html, body {
			background-color: #f8f8f8;
		}
		.map_box {
			position: relative;
			box-shadow: 0px -2px 10px #999;
			height: 260px;
		}
		.map_box .back {
			width: 28px;
			position: absolute;
			left: 15px;
			top: 35px;
		}
		.state_p {
			height: 60px;
			line-height: 60px;
			color: #333;
			font-size: 17px;
			text-align: center;
			background-color: #fff;
			margin-bottom: 6px;
		}
		.staff_phone {
			height: 65px;
			background-color: #fff;
			border-bottom: 1px solid #e8e8e8;
			overflow: hidden;
		}
		.staff_phone .staff_phonel {
			height: 65px;
			float: left;
			display: -webkit-box;
			-webkit-box-align: center;
			padding: 0 15px;
		}
		.staff_phone .staff_phonel .img_box {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #d3d3d3;
		}
		.staff_phone .staff_phonel .img_box img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.staff_phone .staff_phoner {
			height: 65px;
			float: right;
			padding: 0 15px;
			display: -webkit-box;
			-webkit-box-align: center;
		}
		.staff_phone .staff_phoner img {
			width: 36px;
			display: block;
		}
		.order_complete {
			background-color: #fff;
			text-align: center;
			padding: 15px 0;
			margin-bottom: 6px;
		}
		.order_complete img {
			height: 36px;
			vertical-align: middle;
		}
		.order_complete .order_p {
			font-size: 15px;
			font-weight: bold;
			color: #333;
			margin-top: 11px;
		}
		.order_complete .order_btn {
			margin-top: 20px;
			overflow: hidden;
			display: inline-block;
		}
		.order_complete .order_btn .btn {
			width: 70px;
			height: 26px;
			line-height: 26px;
			float: left;
			color: #e62442;
			border: 1px solid #e62442;
			border-radius: 5px;
			margin-right: 10px;
			font-size: 12px;
		}
		.order_complete .order_btn .btn:last-child {
			margin-right: 0;
		}
		.order_complete .order_btn .btn_s {
			color: #fff;
			background-color: #e62442;
		}
		.seller_info {
			display: -webkit-box;
			display: -webkit-flex;
			align-items: center;
			background-color: #fff;
			padding: 10px 15px;
			border-bottom: 1px solid #e8e8e8;
		}
		.seller_info .seller_info_l .seller_img {
			width: 45px;
			height: 45px;
		}
		.seller_info .seller_info_l .seller_img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.seller_info .seller_info_c {
			width: 0;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
			padding: 0 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.seller_info .seller_info_r img {
			height: 13px;
			display: block;
		}
		.order_info {
			background-color: #fff;
			margin-bottom: 6px;
		}
		.order_info .goods {
			padding: 16px 0;
			border-bottom: 1px solid #e8e8e8;
		}
		.order_info .goods ul li:last-child .li_box {
			margin-bottom: 0;
		}
		.order_info .goods .li_box {
			color: #999;
			display: -webkit-box;
			display: -webkit-flex;
			padding: 0 15px;
			margin-bottom: 19px;
		}
		.order_info .goods .li_box .li_boxl {
			font-size: 14px;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
			padding-right: 5px;
		}
		.order_info .goods .li_box .li_boxr {
			font-size: 12px;
		}
		.order_info .goods .li_box .li_boxr .goods_num {
			margin-right: 17px;
		}
		.discount_box {
			border-bottom: 1px solid #e8e8e8;
		}
		.discount {
			height: 50px;
			line-height: 50px;
			padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
		}
		.discount .discount_l {
			font-size: 12px;
			color: #999;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
		}
		.discount .discount_l span {
			width: 16px;
			height: 16px;
			line-height: 16px;
			text-align: center;
			background-color: #ff5f78;
			color: #fff;
			display: inline-block;
			border-radius: 3px;
			margin-right: 5px;
		}
		.discount .discount_r {
			color: #999;
			font-size: 12px;
		}
		.distribution_price {
			height: 50px;
			line-height: 50px;
			padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
			border-bottom: 1px solid #e8e8e8;
		}
		.distribution_price .distribution_price_l {
			color: #333;
			font-size: 15px;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
		}
		.distribution_price .distribution_price_r {
			color: #999;
			font-size: 12px;
		}
		.common_box {
			height: 50px;
			line-height: 50px;
			padding: 0 15px;
			display: -webkit-box;
			display: -webkit-flex;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
		}
		.common_box .common_boxl {
			color: #333;
			font-size: 15px;
			padding-right: 5px;
		}
		.common_box .common_boxr {
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
			color: #999;
			font-size: 12px;
			text-align: right;
		}
		.common_box .gst_num {
			color: #999;
		}
		.no_border_bottom {
			border-bottom: none;
		}
		.common_box .common_boxr.price_num {
			color: #e62442;
			font-size: 15px;
		}
		.remark_box {
			background-color: #fff;
		}
		.remark_box textarea {
			width: 100%;
			height: 60px;
			color: #999;
			font-size: 14px;
			padding: 10px 15px;
			box-sizing: border-box;
			display: block;
		}
		.remark_box textarea::-webkit-input-placeholder {
			color: #999;
		}
		.title_p {
			height: 35px;
			line-height: 41px;
			padding: 0 15px;
			font-size: 12px;
			color: #999;
		}
		.distribution_box {
			padding: 14px 15px;
			display: -webkit-box;
			display: -webkit-flex;
			align-items: center;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
		}
		.distribution_box .distribution_boxl {
			color: #333;
			font-size: 15px;
			padding-right: 5px;
		}
		.distribution_box .distribution_boxr {
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
			color: #999;
			font-size: 12px;
			text-align: right;
		}
		.distribution_box .distribution_boxr .distribution_p1 {
			margin-bottom: 10px;
		}
        .staff_box {
            padding: 14px 15px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;

        }
        .staff_box .staff_boxl {
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            color: #333;
            font-size: 15px;
            padding-right: 5px;
        }
        .staff_box .staff_boxc {
            margin-right: 7px;
        }
        .staff_box .staff_boxc .staff_img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #d3d3d3;
        }
        .staff_box .staff_boxc .staff_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .staff_box .staff_boxr {
            color: #999;
            font-size: 12px;
        }
        .staff_box .staff_boxr .staff_p1 {
            margin-bottom: 10px;
        }
		.hidden {
			display: none !important;
		}
		.h10 {
			height: 10px;
			background: white;
		}
		.coupon ,.ticket{
            display: none;
        }
        .delivery_price{
        	color: #e62442;
        }
        .shop_address{
            overflow: hidden;
            font-size: 13px;
            line-height: 57px;
            color: #333333;
            padding: 0 15px;
            background: white;
        }
        .address_outer{
            border-bottom: 1px solid #e8e8e8;
			overflow: hidden;
        }
        .shop_address img{
            width: 18px;
            height: 18px;
            margin-right: 6px;
            float: left;
            margin-top: 10px;
        }
        .shop_address span{
            float: left;
        }
        .user_address{
            font-size: 13px;
            overflow: hidden;
            line-height: 57px;
            color: #999999;
            padding: 0 15px;
            background: white;
            margin-bottom: 6px;
        }
        .user_address img{
            width: 18px;
            height: 18px;
            margin-right: 6px;
            float: left;
            margin-top: 10px;
        }
        .user_address .delivery{
            float: left;
            width: 90%;
        }
        .shop_address{
            font-size: 13px;
            overflow: hidden;
            line-height: 57px;
            color: #999999;
            padding: 0 15px;
            background: white;
        }
        .shop_address img{
            width: 18px;
            height: 18px;
            margin-right: 6px;
            float: left;
            margin-top: 10px;
        }
        .shop_address .delivery{
            float: left;
            width: 90%;
        }
        .delivery p{
        	line-height: 13px;
        }
        .delivery_address{
        	margin-top: 14px;
        	color: #333;
        }
        .dedelivery_name{
        	margin-top: 8px;
        	margin-bottom: 12px;
        }
        .common_boxr.staff_phone_num{
        	font-size: 13px;
        	color: #1baae5;
        }
        .contact_staff{
        	display: none;
        }
        .confirm_order,.continus_pay{
        	padding: 0 15px;
        	background: white;
        	padding-top: 38px;
        	display: none;
        }
        .confirm_delivery{
        	background: #e62442;
        	color: white;
        	height: 45px;
        	text-align: center;
        	width: 100%;
        	line-height: 45px;
        	font-size: 16px;
        	border-radius: 5px;
        }
       	.payment_method {
       		padding: 0 15px 16px;
       		margin-bottom: 6px;
       		background: white;
       		display: none;
       	}
       	.payment_method .payment_method_t {
    			height: 48px;
    			line-height: 48px;
       	}
       	.payment_method .payment_method_b ul {
			overflow: hidden;
       	}
       	.payment_method .payment_method_b ul li {
       		width: 50%;
       		float: left;
       		padding: 0 8px 0 0;
       		box-sizing: border-box;
       	}
       	.payment_method .payment_method_b ul li:nth-child(2n) {
       		padding: 0 0 0 8px;
       	}
       	.payment_method .payment_method_b ul li .li_pay {
       		height: 55px;
       		border: 1px solid #ccc;
       		border-radius: 5px;
       		display: -webkit-box;
       		-webkit-box-align: center;
       		-webkit-box-pack: center;
       	}
       	.payment_method .payment_method_b ul li .li_pay img {
       		width: 31px;
       		display: block;
       		margin-right: 11px;
       	}
       	.payment_method .payment_method_b ul li .li_pay span {
       		display: block;
       		color: #333;
       		font-size: 12px;
       	}
       	.pay_type .active .li_pay{
       	  border:1px solid #e62442 !important;
       	}
       	.package_start_address{
   			margin-top: 14px;
   			color: #333;
       	}
       	.order_unpay {
       	    background-color: #fff;
       	    text-align: center;
       	    padding: 15px 0;
       	    margin-bottom: 6px;
       	}
       	.order_unpay img {
       	    height: 36px;
       	    vertical-align: middle;
       	}
       	.order_unpay .order_p {
       	    font-size: 15px;
       	    font-weight: bold;
       	    color: #333;
       	    margin-top: 11px;
       	}
	</style>
</head>
<body>
	<div class="order_unpay">
	    <img class="tempImg" src="../image/default.png">
	    <div class="order_p">---</div>
	    <div class="order_btn">
	        
	    </div>
	</div>
	<div class="staff_phone hidden">
		<div class="staff_phonel">
			<div class="img_box">
				<img class="staff_head" src="../image/default.png">
			</div>
		</div>
		<div class="staff_phoner">
			<img src="../image/seller_icon5.png">
		</div>
	</div>

    <div class="shop_address">
    	<div class="address_outer">
        <img src="../image/3.png">
        <!-- <span class="address">&nbsp;</span> -->
        <div class="delivery">
        	<p class="package_start_address">&nbsp;</p>
        	<p class="dedelivery_name"><span class="package_start_username">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="package_start_tel">&nbsp;</span></p>
        </div>
        </div>
    </div>
    <div class="user_address">
        <img src="../image/client_address.png">
        <div class="delivery">
        	<p class="delivery_address">&nbsp;</p>
        	<p class="dedelivery_name"><span class="delivery_people">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="delivery_phone">&nbsp;</span></p>
        </div>
    </div>




    <div class="order_info">
        <div class="goods" style="display: none;">
            <ul id="goods_ul">
<!--                 <li>
                    <div class="li_box">
                        <div class="li_boxl">菜品名称</div>
                        <div class="li_boxr">
                            <span class="goods_num">×1</span>
                            <span>RM19</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li_box">
                        <div class="li_boxl">餐盒</div>
                        <div class="li_boxr">
                            <span class="goods_num">×3</span>
                            <span>RM3</span>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <div class="discount_box coupon">
            <ul>
                <li>
                    <div class="discount">
                        <div class="discount_l"><span>减</span><time class="coupon_str"></time></div>
                        <div class="discount_r">-RM<span class="coupon_price"></span></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="discount_box ticket">
            <ul>
                <li>
                    <div class="discount">
                        <div class="discount_l"><span>卷</span>使用优惠卷</div>
                        <div class="discount_r">-RM<span class="ticket_price"></span></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="common_box" style="display: none;">
            <div class="common_boxl">配送费</div>
            <div class="common_boxr">RM<span class="delivery_price"></span></div>
        </div>
        <div class="common_box gst_box" style="display: none;">
            <div class="common_boxl">GST<span class="gst_num">（6.00%）</span></div>
            <div class="common_boxr">RM<span class="gst_fee"></span></div>
        </div>
        <div class="common_box no_border_bottom">
            <div class="common_boxl">订单金额</div>
            <div class="common_boxr price_num">RM<span class="must_pay"></span></div>
        </div>
    </div>
<!--     <div class="remark_box">
        <textarea placeholder="请输入文字"></textarea>
    </div> -->
    <!-- <div class="title_p">配送信息</div>
    <div class="distribution_box">
        <div class="distribution_boxl">收货地址</div>
        <div class="distribution_boxr">
            <div class="distribution_p1 address_detail"></div>
            <div class="distribution_p2"><span class="username"></span> <span class="tel"></span></div>
        </div>
    </div> -->
    <div class="staff_box hidden">
        <div class="staff_boxl">骑手信息</div>
        <div class="staff_boxc">
            <div class="staff_img">
                <img class="staff_head" src="../image/default.png">
            </div>
        </div>
        <div class="staff_boxr">
            <div class="staff_p1 staff_name"></div>
            <div class="staff_p2 staff_tel"></div>
        </div>
    </div>
    <div class="title_p">订单信息</div>
    <div class="common_box">
        <div class="common_boxl">订单号</div>
        <div class="common_boxr order_number"></div>
    </div>
    <div class="common_box">
        <div class="common_boxl">支付方式</div>
        <div class="common_boxr pay_method">在线支付</div>
    </div>
	<div class="payment_method">
		<div class="payment_method_t">支付方式</div>
		<div class="payment_method_b">
			<ul class="pay_type">
                <li class="active" onclick="fnPayType(1,this);" tapmode>
                  <div class="li_pay">
                    <img style="width: 80px;" src="../image/paydollar.png">
                  </div>
                </li>
				<li onclick="fnPayType(2,this);" tapmode>
					<div class="li_pay">
    					<img src="../image/cmb.png">
						<span>支付宝        </span>
					</div>
				</li>
			</ul>
		</div>
	</div>
    <div class="common_box">
        <div class="common_boxl">下单时间</div>
        <div class="common_boxr create_time"></div>
    </div>
    <div class="common_box no_border_bottom contact_staff">
        <div class="common_boxl">联系骑手</div>
        <div class="common_boxr staff_phone_num" tapmode onclick="toCall()">&nbsp;</div>
    </div>
    <div class="h10"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="goodsTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it['goods'].length;i++){ }}
        <li>
          <div class="li_box">
            <div class="li_boxl">{{=it['goods'][i]['goods_name']}}</div>
            <div class="li_boxr">
              <span class="goods_num">×{{=it['goods'][i]['goods_num']}}</span>
              <span class="goods_price">RM{{=(it['goods'][i]['price']*it['goods'][i]['goods_num']).toFixed(2)}}</span>
            </div>
          </div>
        </li>
    {{ }; }}
    <li>
      <div class="li_box" style="display: none;">
        <div class="li_boxl">餐盒</div>
        <div class="li_boxr">
          <span class="goods_num">×{{=it['canteen_num']}}</span>
          <span>RM{{=(it['canteen_price']*1).toFixed(2)}}</span>
        </div>
      </div>
    </li>
</script>
<script type="text/javascript">
    var payType = 1; // 默认paydollar支付

	apiready = function(){
		openLoading();
		id = api.pageParam.id;
        status = api.pageParam.status;
        if(status == 4){
        	$(".tempImg").attr('src','../image/prompt.png');
        	$(".order_p").text('订单已完成，待确认');
        }else if (status == 2){
        	$(".tempImg").attr('src','../image/order_complete.png');
        	$(".order_p").text('包裹订单已发出，骑手正在赶往');
        }else if (status == 3){
        	$(".tempImg").attr('src','../image/order_complete.png');
        	$(".order_p").text('骑手已抢单，准备上门取货');
        }else if (status == 5 || status == 6){
        	$(".tempImg").attr('src','../image/order_complete.png');
        	$(".order_p").text('订单已确认');
        }
        user = $api.getStorage('user_data');

        getOrder();
	};

	function continusPay () {
		if(payType == 1){
		  fnPaydollarPay(id);
		}else{
		  api.toast({
		    msg: '支付宝支付',
		    location: 'middle'
		  });
		}
	};

	function fnPaydollarPay (order_id) {
		api.openWin({
			name: 'paydollar',
			url: './paydollar.html',
			pageParam: {
		  		order_id: order_id
			}
		});
	}

	function fnPayType(type,this_) {
	  $('.pay_type li').removeClass('active');
	  $(this_).addClass('active');
	  payType = type;
	}

	function confirmDelivery () {
		api.ajax({
		    url: rootPath+'/api/order/do_confirm_delivery',
		    method: 'get',
		    data: {
		        values: { 
		            order_id: id,
		            uid:user.id,
		            token:user.token
		        },

		    }
		}, function(ret, err) {
		    if (ret && ret.status == 200) {
		    	toast('确认完成',300);
		    	var jsfun = 'fnHideConfirmButton();';
		    	api.execScript({
		    	    script: jsfun
		    	});

		    	var jsfun2 = 'updateStatusEvent();';
		    	api.execScript({
    				name: 'root',
    				frameName: 'order',
		    	    script: jsfun2
		    	});
		    }
		});
	};

	function toCall () {
		var num = $('.staff_phone_num').html();
		if(num > 0){
			api.call({
			    type: 'tel_prompt',
			    number: '+'+num
			});
		}
	};

	function getOrder() {
        user = $api.getStorage('user_data');
        api.ajax({
            url: rootPath+'/api/order/order_detail',
            method: 'get',
            data: {
                values: { 
                    order_id: id,
                    uid:user.id,
                    token:user.token
                },

            }
        }, function(ret, err) {
            if (ret) {
            	if(ret.data.status == 0) {
            		$(".pay_method").text('待支付');
            		$('.payment_method').show();
            		$(".payment_method").prev('.common_box').hide();
            	}else if(ret.data.status == 1) {
            		$('.seller_info').removeClass('hidden');
            	}else if(ret.data.status == 2) {
            		$('.seller_info').removeClass('hidden');
            	}else if(ret.data.status == 3) {
            		$('.staff_phone_num').text(ret.data.staff.phone);
            		$(".contact_staff").css('display','-webkit-flex');
            	}else if(ret.data.status == 4) {
            		$('.staff_phone_num').text(ret.data.staff.phone);
            		$(".contact_staff").css('display','-webkit-flex');
            		// $(".confirm_order").show();
            	}else if(ret.data.status == 5 || ret.data.status == 6) {
            		$('.staff_phone_num').text(ret.data.staff.phone);
            		$(".contact_staff").css('display','-webkit-flex');
            	}
            	if(ret.data.staff) {
            		var staff_img = formatHeadImg(ret.data.staff.img);
            		$('.staff_head').attr('src',staff_img);
            		$('.staff_name').text(ret.data.staff.username);
            		$('.staff_tel').text(ret.data.staff.phone);
            	}
                shop_id = ret.data.shop_id;
                setDotData(ret.data,'goodsTpl','goods_ul',true);
                if(ret.data.gst_fee > 0) {
                  $('.gst_box').css('display','-webkit-flex');
                  $('.gst_fee').text(ret.data.gst_fee);
                }
                if(ret.data.coupon_id > 0) {
                    $('.coupon').show();
                    $('.coupon_str').text(ret.data.coupon_str);
                    $('.coupon_price').text(ret.data.coupon_price);
                }
                if(ret.data.ticket_id > 0) {
                    $('.ticket').show();
                    $('.ticket_price').text(ret.data.ticket_price);
                }
                $('.delivery_price').text(ret.data.delivery_price);
                $('.must_pay').text(ret.data.must_pay);
                $('.order_number').text(ret.data.order_number);
                $('.create_time').text(ret.data.create_time);

                $('.package_start_address').text(ret.data.package_start_address);
                $('.package_start_username').text(ret.data.package_start_username);
                $('.package_start_tel').text(ret.data.package_start_tel);

                $('.delivery_address').text(ret.data.address_detail);
                $('.delivery_people').text(ret.data.username);
                $('.delivery_phone').text(ret.data.tel);

            } else {
            	api.toast({
            	    msg: err.msg,
            	    location : 'middle'
            	});
            }
            closeLoading();
        });
    }

    function fnOpenShop() {
        if(shop_id) {
            api.openWin({
                name: 'seller',
                url: './seller.html',
                pageParam: {
                    id: shop_id
                }
            });
        }
    }

    function fnOpenMap(center_lon,center_lat,an_lon,an_lat,an_img) {
    	var GoogleMap = api.require('googleMap');
		GoogleMap.open({
		    rect: {
		        x: 0,
		        y: 0,
		        w: 'auto',
		        h: 260
		    },
		    center: {
		        lon: an_lon,
		        lat: an_lat
		    },
		    zoomLevel: 16,
		    showUserLocation: false,
		    fixedOn: api.frameName,
		    fixed: false
		 }, function(ret) {
		    if (ret.status) {
		    	//标注头像
		        GoogleMap.addAnnotations({
				    annotations: [{
				        id: 1,
				        lon: an_lon,
				        lat: an_lat
				    }],
				    icon: 'widget://image/'+an_img,
				    draggable: true
				}, function(ret) {
				    if (ret) {
				        
				    }
				});
		    }
		 });
		api.openFrame({
		    name: 'back_frame',
		    url: 'back_frame.html',
		    rect: {
		        x: 20,
		        y: 30,
		        w: 50,
		        h: 50
		    },
		    bgColor:'rgba(0,0,0,0)'

		});
    }


</script>
</html>